<div class="page-header d-print-none">
    <div class="container-xl">
      <div class="row g-2 align-items-center">
        <div class="col">
          <h2 class="page-title" id="search_title">
          </h2>
        </div>
      </div>
    </div>
  </div>
  <!-- Page body -->
  <div class="page-body">
    <div class="container-xl">
      <div class="row justify-content-center">
        <!-- 显示列表的宽度 -->
        <div class="col-12">
          <div class="card">
            <div class="card">
                <div class="card-header">
                  <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
                    <li class="nav-item">
                      <a href="#" class="nav-link active" data-bs-toggle="tab" id="search_article">帖子</a>
                    </li>
                    <li class="nav-item">
                      <a href="#" class="nav-link" data-bs-toggle="tab" id="search_user">用户</a>
                    </li>
                  </ul>
                </div>
                <div class="card-body">
                    <div class="divide-y" id="items-body">
                        <!-- 动态生成帖子/用户列表 -->
                        <div class="list-group list-group-flush overflow-auto" style="max-height: 35rem;">
                            <div class="list-group-item">
                                <div class="row">
                                    <div class="col-auto">
                                        <a href="#">
                                            <span class="avatar" style="background-image: url(./image/avatar01.jpeg);"></span>
                                        </a>
                                    </div>
                                    <div class="col text-truncate">
                                        <a href="#" class="text-body d-block">
                                            昵称
                                        </a>
                                        <div class="text-secondary text-truncate mt-n1">
                                            123456
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="btn-list">
                                            <a href="javascript:void(0);" class="btn btn-primary cancel">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash-x-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16zm-9.489 5.14a1 1 0 0 0 -1.218 1.567l1.292 1.293l-1.292 1.293l-.083 .094a1 1 0 0 0 1.497 1.32l1.293 -1.292l1.293 1.292l.094 .083a1 1 0 0 0 1.32 -1.497l-1.292 -1.293l1.292 -1.293l.083 -.094a1 1 0 0 0 -1.497 -1.32l-1.293 1.292l-1.293 -1.292l-.094 -.083z" stroke-width="0" fill="currentColor" /><path d="M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z" stroke-width="0" fill="currentColor" /></svg>
                                                取消关注
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<script>
    $(function() {
        $('#search_title').html('搜索关键字：“' + searchContent + '”');

        let body = $('#items-body');

        function searchArticle() {
            console.log('搜索帖子');
            $.ajax({
                type: 'get',
                url: '/article/getListByTitle?title=' + searchContent,
                success: function(respData) {
                    if (respData.code == 0) {
                        body.html('');
                        searchBuildArticleList(respData.data);
                    } else {
                        // 提示失败信息
                        jQuery.toast({
                            heading: '警告',
                            text: respData.message,
                            icon: 'warning'
                        });
                    }
                },
                error: function() {
                    $.toast({
                        heading: '错误',
                        text: '访问出现问题，请与管理员联系.',
                        icon: 'error'
                    });
                }
            });
        }

        function searchBuildArticleList(data) {
            if(data.length == 0) {
                body.html('没有找到标题包含“' + searchContent +'”的帖子');
                return;
            }
            // 默认头像路径
            let avatarUrl = 'image/avatar01.jpeg';
            // 遍历结果
            data.forEach(article => {
                // 设置默认头像
                if (!article.user.avatarUrl) {
                    article.user.avatarUrl = avatarUrl;
                }
                // 构造HTML
                let articleHtmlStr = '<div>'
                + ' <div class="row">'
                + ' <div class="col-auto">'
                + ' <span class="avatar" style="background-image: url(' + article.user.avatarUrl + ')"></span>'
                + ' </div>'
                + ' <div class="col">'
                + ' <div class="text-truncate">'
                + ' <a href="javascript:void(0);" class="article_list_a_title">'
                + ' <strong>' + article.title + '</strong>'
                + ' </a>'
                + ' </div>'
                + ' <div class="text-muted mt-2">'
                + ' <div class="row">'
                + ' <div class="col">'
                + ' <ul class="list-inline list-inline-dots mb-0">'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user"'
                + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
                + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
                + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                + ' <path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>'
                + ' <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>'
                + ' </svg> '
                + article.user.nickname
                + ' </li>'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg"'
                + ' class="icon icon-tabler icon-tabler-clock-edit" width="24" height="24"'
                + ' viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
                + ' stroke-linecap="round" stroke-linejoin="round">'
                + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                + ' <path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>'
                + ' <path d="M12 7v5l2 2"></path>'
                + ' <path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z">'
                + ' </path>'
                + ' </svg> '
                + article.createTime
                + ' </li>'
                + ' </ul>'
                + ' </div>'
                + ' <div class="col-auto  d-md-inline">'
                + ' <ul class="list-inline list-inline-dots mb-0">'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye"'
                + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
                + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
                + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                + ' <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>'
                + ' <path'
                + ' d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7">'
                + ' </path>'
                + ' </svg> '
                + article.visitCount
                + ' </li>'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-thumb-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3" /></svg> '
                + article.likeCount
                + ' </li>'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg> '
                + article.markCount
                + ' </li>'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg"'
                + ' class="icon icon-tabler icon-tabler-message-circle" width="24" height="24"'
                + ' viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
                + ' stroke-linecap="round" stroke-linejoin="round">'
                + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                + ' <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>'
                + ' <path d="M12 12l0 .01"></path>'
                + ' <path d="M8 12l0 .01"></path>'
                + ' <path d="M16 12l0 .01"></path>'
                + ' </svg> '
                + article.replyCount
                + ' </li>'
                + ' </ul>'
                + ' </div>'
                + ' </div>'
                + ' </div>'
                + ' </div>'
                + ' </div>'
                + ' </div>';
                // 转为元素对象
                let articleItem = $(articleHtmlStr);
                // 获取标题的 a 标签
                let articleTitle = articleItem.find('.article_list_a_title');
                // 处理标题点击事件
                articleTitle.click(function() {
                    // 通过全局变量保存当前访问的帖子信息
                    currentArticle = article;
                    $('#forum-content').load('details.html');
                });
                // 添加到列表
                body.append(articleItem);
            });
        }

        function searchUser() {
            console.log('搜索用户');
            $.ajax({
                type: 'get',
                url: '/user/getListByNickname?nickname=' + searchContent,
                success: function(respData) {
                    if (respData.code == 0) {
                        body.html('');
                        searchBuildUserList(respData.data);
                    } else {
                        // 提示失败信息
                        jQuery.toast({
                            heading: '警告',
                            text: respData.message,
                            icon: 'warning'
                        });
                    }
                },
                error: function() {
                    $.toast({
                        heading: '错误',
                        text: '访问出现问题，请与管理员联系.',
                        icon: 'error'
                    });
                }
            });
        }

        function searchBuildUserList(data) {
            if (data.length == 0) {
	            body.html('没有找到昵称包含“' + searchContent +'”的用户');
                return;
            }

            data.forEach(user => {
                // 构造html
                let userHtmlStr = ' <div class="list-group list-group-flush overflow-auto" style="max-height: 35rem;"> '
                    + ' <div class="list-group-item"> ' 
                    + ' <div class="row"> '
                    + ' <div class="col-auto"> '
                    + ' <a href="#"> <span class="avatar" style="background-image: url(./image/avatar01.jpeg);"></span> </a>'
                    + ' </div> '
                    + ' <div class="col text-truncate"> '
                    + ' <a href="#" class="text-body d-block nickname"> ' + user.nickname + ' </a> '
                    + ' <div class="text-secondary text-truncate mt-n1 remark"> </div> '
                    + ' </div> </div> </div> </div>';

                // 转为元素对象
                let userItem = $(userHtmlStr);
                // 设置个人简介
                if (user.remark) {
                    userItem.find('.remark').html(user.remark);
                }
                // 设置头像
                if (user.avatarUrl) {
                    userItem.find('.avatar').css('background-image', 'url(' + user.avatarUrl + ')');
                }
                // 设置点击事件
                userItem.find('.nickname').click(function() {
                    profileUserId = user.id;
                    // 是否为当前登录用户
                    if (profileUserId == currentUserId) {
                        profileUserId = undefined;
                    }
                    $('#forum-content').load('profile.html');
                });
                userItem.find('.avatar').click(function() {
                    profileUserId = user.id;
                    // 是否为当前登录用户
                    if (profileUserId == currentUserId) {
                        profileUserId = undefined;
                    }
                    $('#forum-content').load('profile.html');
                });
                // 添加到列表
                body.append(userItem);
            });
        }

        $('#search_article').click(function () {
            searchArticle();
        });

        $('#search_user').click(function() {
            searchUser();
        });

        searchArticle();
    })
</script>